<template>
	<view class="account-security">
		<view class="list">
			<view class="item" @tap="nav('修改密码')">
				<view class="label"> 修改密码 </view>
				<image src="/static/icon/order/right.png" class="v-img"/>
			</view>
			<view class="item" @tap="nav('账号注销')">
				<view class="label"> 账号注销 </view>
				<image src="/static/icon/order/right.png" class="v-img"/>
			</view>
			<!-- <view class="item" @tap="nav('第三方账号绑定')">
				<view class="label"> 第三方账号绑定 </view>
				<image src="/static/icon/order/right.png" />
			</view> -->
			<view class="item" @tap="nav('更换手机号')">
				<view class="label"> 手机号 </view>
				<view class="value">
					<text>{{mobile}}</text>
					<image src="/static/icon/order/right.png" class="v-img"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import { useUserStore } from '@/store/index.js'
	const mobile = computed(() => {
		const { userInfo } = useUserStore()
		return userInfo.mobile
	})
	// 账号安全导航
	const nav = (title) => {
		uni.navigateTo({
			url: `/pages/accountCancellation/accountCancellation?title=${title}`
		})
	}
</script>

<style lang="scss" scoped>
	.account-security {
		width: 100%;
		padding: 10px 12px;
		box-sizing: border-box;
		.list {
			width: 100%;
			color: #333333;
			font-size: 14px;
			font-weight: 400;
			padding: 0 12px;
			border-radius: 10px;
			box-sizing: border-box;
			background-color: #fff;
			.item {
				height: 50px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #eeeeee;
				&:nth-last-of-type(1) {
					border-bottom: 0;
				}
				.v-img {
					width: 14px;
					height: 14px;
					margin-left: 2px;
				}
				.value {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>